<template>
    <view class="page">
        <view class="logo">
            <image :src="$imgUrl+'logo01.png'" mode=""></image>
        </view>
        <!-- 填写区 -->
        <view class="input-info">
            <view class="info">
                <input type="tel" maxlength="11" v-model="form.mobile" placeholder="请输入手机号">
                <view class="more">
                    <!-- <text class="lg text-gray cuIcon-close"></text> -->
                </view>
            </view>
            <view class="info" :style="isLoginWay ? '' : 'display: none' ">
                <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
                <view class="more">
                    <text class="mo" :disabled="codeDisabled" plain @click="getCode">{{codeText}}</text>
                    <!-- <text class="mo" style="display: none">59秒后重试</text> -->
                </view>
            </view>
            <view class="info" :style="isLoginWay ? 'display:none' : ''">
                <input :password='!isPassword' v-model="form.password" maxlength="26" placeholder="请输入密码">
                <view class="more">
                    <text class="iconfont" :class="isPassword ? 'icon-eye-off' : 'icon-eye-on'" @click="isPassword = !isPassword"></text>
                    <text class="mo" @click="findCode">忘记密码</text>
                </view>
            </view>
        </view>
        <!-- 按钮 -->
        <view class="btn-info">
            <view class="btn" @click="onLogin()">
                <text>登录</text>
            </view>
        </view>
        <!-- 操作 -->
        <view class="operation">
            <text @click="onLoginCut">{{isLoginWay?'密码登录':'短信验证码登录'}}</text>
            <text @click="onRegister">新用户注册</text>
        </view>
        <!-- 其他方式登录 -->
        <view class="other-ways">
            <text>其他登录方式</text>
        </view>
        <!-- 登录方式 -->
        <view class="login-way">
            <view class="way" @click="thirdPartyLogin(0)">
                <image :src="$imgUrl+'wx_ico.png'" mode=""></image>
                <text>微信登录</text>
            </view>
            <view class="way" @click="thirdPartyLogin(1)">
                <image :src="$imgUrl+'QQ_03.png'" mode=""></image>
                <text>QQ登录</text>
            </view>
            <!-- <view class="way" @click="loginPhone">
                <image src="/static/QQ_03.png" mode=""></image>
                <text>一键登录</text>
            </view> -->
        </view>

        <quick-message ref="message"></quick-message>
    </view>
</template>

<script>
import {
    sendToLogin
} from '@/api/login.js'
export default {
    data() {
        return {
            isLogin: false,
            isLoginWay: false,
            isPassword: false,
            codeText: '获取验证码',
            menuNum: 60,
            codeDisabled: false, //验证码禁用状态
            codeTimer: null,
            // 表单
            form: {
                mobile: '',
                code: '',
                password: '',
            },
            providerList: [],
            $imgUrl: this.$imgUrl,
        };
    },
    mounted() {
        uni.getProvider({
            service: 'oauth',
            success: result => {
                this.providerList = result.provider.map(value => {
                    let providerName = '';
                    let icon = '';
                    let bgColor = '';
                    switch (value) {
                        case 'weixin':
                            providerName = '微信登录';
                            icon = 'icon-weixin';
                            bgColor = 'bg-success';
                            break;
                        case 'qq':
                            providerName = 'QQ登录';
                            icon = 'icon-QQ';
                            bgColor = 'bg-primary';
                            break;
                        case 'sinaweibo':
                            providerName = '新浪微博登录';
                            icon = 'icon-xinlangweibo';
                            bgColor = 'bg-warning';
                            break;
                    }
                    return {
                        name: providerName,
                        id: value,
                        icon: icon,
                        bgColor: bgColor
                    };
                });
            },
            fail: error => {
                console.log('获取登录通道失败！', error);
                return false;
            }
        });
    },
    methods: {
        onRegister() {
            this.$navigateTo({
                url: '/pagesA/login/register'
            })
        },
        /**
         * 登录切换
         */
        onLoginCut() {
            this.isLoginWay = !this.isLoginWay;
            // 验证码
            if (this.isLoginWay) {
                this.isLogin = this.form.code && this.form.phone ? true : false;
            }
            // 账号密码
            if (!this.isLoginWay) {
                this.isLogin = this.form.password && this.form.phone ? true : false;
            }
        },
        // 找回密码
        findCode() {
            this.$navigateTo({
                url: '/pagesA/login/findCodefindCode'
            })
        },
        // 获取验证码
        getCode() {
            var self = this;
            this.checkPhone().then(() => {
                this.codeDis = true;
                this.codeText = self.menuNum + "s";
                this.timer = setInterval(function () {
                    if (self.menuNum == 0) {
                        clearInterval(self.timer);
                        self.codeDis = false;
                        self.codeText = "重新获取";
                        self.menuNum = 60;
                    } else {
                        self.menuNum--;
                        self.codeText = self.menuNum + "s";
                    }
                }, 1000);
                sendToLogin({ mobile: this.form.mobile.trim() }).then(() => {
                    this.$message('验证码已发送')
                })
            }).catch(() => { });
        },
        // 手机号一键登录
        loginPhone() {
            uni.preLogin({
                provider: 'univerify',
                success(res) { //预登录成功
                    // 显示一键登录选项
                    console.log(res);
                    console.log('999', 2222);
                    console.log('预登录成功');
                    uni.login({
                        provider: 'univerify',
                        univerifyStyle: { // 自定义登录框样式
                            //参考`univerifyStyle 数据结构`
                            "fullScreen": true, // 是否全屏显示，默认值： false
                            "title": '快速登录',
                            "backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
                            "icon": {
                                "path": "../../static/my/头像.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
                            },
                            "phoneNum": {
                                "color": "#000000", // 手机号文字颜色 默认值：#000000
                                "fontSize": "18" // 手机号字体大小 默认值：18
                            },
                            "slogan": {
                                "color": "#8a8b90", //  slogan 字体颜色 默认值：#8a8b90
                                "fontSize": "12" // slogan 字体大小 默认值：12
                            },
                            // 一键登录
                            "authButton": {
                                "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
                                "highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
                                "disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
                                "textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
                                "title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
                            },
                            // 其他登录方式
                            "otherLoginButton": {
                                "visible": "true", // 是否显示其他登录按钮，默认值：true
                                "normalColor": "#f8f8f8", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
                                "highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值：#dedede
                                "textColor": "#000000", // 其他登录按钮文字颜色 默认值：#000000
                                "title": "密码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
                                "borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
                                "borderColor": "#c5c5c5" //边框颜色 默认值： #c5c5c5（仅ios支持）
                            },
                            // 自定义按钮登录方式
                            "buttons": { // 仅全屏模式生效，配置页面下方按钮  （3.1.14+ 版本支持）  
                                "iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px  
                                "list": [{
                                    "provider": "apple",
                                    "iconPath": "/static/test.jpg", // 图标路径仅支持本地图片  
                                },
                                {
                                    "provider": "weixin",
                                    "iconPath": "/static/test.jpg",
                                }
                                ]
                            },
                            "privacyTerms": {
                                "defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true
                                "textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90
                                "termsColor": "#1d4788", //  协议文字颜色 默认值： #1d4788
                                "prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
                                "suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
                                "fontSize": "12", // 字体大小 默认值：12,
                                "privacyItems": [
                                    // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
                                    {
                                        "url": "https://", // 点击跳转的协议详情页面
                                        "title": "用户服务协议" // 协议名称
                                    }
                                ]
                            }
                        },
                        success(res) { // 登录成功
                            console.log(res);
                            this.openid = res.authResult.openid;
                            this.access_token = res.authResult.access_token;

                            console.log(this.openid);
                            console.log("access_token", this.access_token);



                            // 客户端(调用云函数)  调用云函数来实现整个业务逻辑
                            // 在得到access_token后，通过callfunction调用云函数
                            uniCloud.callFunction({
                                name: "getPhoneNumber",
                                data: {
                                    'openid': this.openid,
                                    'access_token': this.access_token
                                }
                            }).then(res => {
                                console.log("走了吗？？？")
                                console.log("获取成功");
                                console.log(res); // res 内容则包含手机号码
                                // 获取用户的手机号
                                this.phoneNumber = res.result.data.phoneNumber;
                                console.log(this.phoneNumber);
                                console.log(res);

                                // return utils.request(
                                //     "/api/api.php?action=phonelogin", //接口
                                //     "POST",
                                //     {
                                //         // '参数'
                                //     }, false, true, true)
                                //     .then(res => {
                                //         uni.closeAuthView() //成功关闭授权页面
                                //         console.log('登录成功', res)
                                //         console.log(res.code);
                                //         if (res.code == 1) {
                                //             setTimeout(() => {
                                //                 uni.redirectTo({
                                //                     url: '/pages/index/index'
                                //                 })
                                //             }, 500)
                                //         }
                                //     })
                            }).catch((err) => {
                                // 执行失败
                                console.log("没有获取到手机号啊！！！！！")
                            })
                        },
                        // 当用户点击自定义按钮时，会触发uni.login的fail回调[点击其他登录方式，可以跳转页面]
                        // 判断返回数据执行任意逻辑
                        fail(res) { // 登录失败
                            console.log(res.errCode)
                            console.log(res.errMsg)
                            if (res.code == "30002") {
                                console.log('密码登录');
                            } else if (res.code == "30008") {
                                console.log('自定义按钮登录方式');
                            }
                        }
                    })
                },
                fail(res) { // 预登录失败
                    // 不显示一键登录选项（或置灰）
                    // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
                    console.log('失败', 2222);
                    console.log(res.errCode)
                    console.log(res.errMsg)
                }
            });
        },
        showToast() {
            this.$refs.message.show({
                msg: this.toastText,
                type: "error",
            });
        },
        checkPhone() {
            return new Promise((resolve, reject) => {
                if (!this.form.mobile) {
                    this.toastText = "请输入手机号";
                    this.showToast();
                    reject();
                } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)) {
                    this.toastText = "请输入正确的手机号";
                    this.toastError = true;
                    this.showToast();
                    reject();
                }
                resolve()
            })
        },
        checkAll() {
            return new Promise((resolve, reject) => {
                if (!this.form.mobile) {
                    this.toastText = "请输入手机号";
                    this.showToast();
                    reject();
                } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)) {
                    this.toastText = "请输入正确的手机号";
                    this.showToast();
                    reject();
                } else if (!this.form.code && this.isLoginWay) {
                    this.toastText = "请输入验证码";
                    this.showToast();
                    reject();
                } else if (!this.form.password && !this.isLoginWay) {
                    this.toastText = "请输入登录密码";
                    this.showToast();
                    reject();
                } else if (this.form.password.length < 6 && !this.isLoginWay) {
                    this.toastText = "登录密码最少6位";
                    this.showToast();
                    reject();
                }
                resolve();
            });
        },
        /**
         * 登录点击
         */
        onLogin() {
            this.checkAll().then(() => {
                let josn1 = {
                    mobile: this.form.mobile,
                    code: this.form.code
                }
                let json2 = {
                    mobile: this.form.mobile,
                    pass: this.$md5.md5(this.form.password),
                }
                console.log(json2,"json2json2json2json2")
                let json = this.isLoginWay ? josn1 : json2
                let fun = this.isLoginWay ? 'mobileLogin' : 'passLogin'
                this.$store.dispatch(fun, json).then((res) => {
                    if (res.code == 1) {
                        this.$refs.message.show({
                            msg: "登录成功",
                            type: "success"
                        })
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '/pages/my/my'
                            })
                        }, 1000)
                    }
                }).catch(() => {
                    this.loading = false;
                });
            }).catch(() => { })
        },
        /**
         * 微信登录
         */
        wxLogin() {
            uni.showToast({
                title: '微信登录',
                icon: 'none'
            });
            //调用uni.login 时就会打开微信授权的页面
            // 在uni.login 的成功回调函数里面  调用uni.getUserInfo来获取微信的个人信息
            uni.login({
                provider: 'weixin',
                success: (loginreq) => {
                    console.log("loginreq:" + JSON.stringify(loginreq))
                    uni.getUserInfo({
                        provider: 'weixin',
                        success: (successreq) => { //拿到微信的信息   头像 昵称 等  
                            console.log("successreq" + JSON.stringify(successreq))
                        }
                    })
                }
            })
        },

        //第三方登录
        thirdPartyLogin(index) {
            if (index === '' || index === undefined || index === 'undefined') {
                uni.showToast({
                    title: '参数错误，请联系管理员！',
                    icon: 'none',
                    duration: 3000
                });
                return false;
            } else {
                let loginType = '';
                // 1 判断用户的登录类型
                if (index == 0) {
                    loginType = 'weixin';
                } else if (index == 1) {
                    loginType = 'qq';
                } else if (index == 2) {
                    loginType = 'sinaweibo';
                }
                // 2 授权登录，弹出授权窗口
                uni.login({
                    provider: loginType,
                    success: res => {
                        var access_token = '';
                        access_token = res.authResult.access_token;
                        // 3 授权登录成功以后，获取用户的信息
                        uni.getUserInfo({
                            provider: loginType,
                            success: function (infoRes) {
                                let formdata = {};
                                if (index == 0) {
                                    formdata = {
                                        nickName: infoRes.userInfo.nickName,
                                        gender: infoRes.userInfo.gender,
                                        headImgUrl: infoRes.userInfo.avatarUrl,
                                        openId: infoRes.userInfo.openId,
                                        unionId: infoRes.userInfo.unionId,
                                        access_token: access_token,
                                        appLoginType: 'WEIXIN'
                                    };
                                } else if (index == 1) {
                                    formdata = {
                                        nickName: infoRes.userInfo.nickname,
                                        gender: infoRes.userInfo.gender == '男' ? 1 : 2,
                                        headImgUrl: infoRes.userInfo.figureurl_qq_2,
                                        openId: infoRes.userInfo.openId,
                                        unionId: '',
                                        access_token: access_token,
                                        appLoginType: 'QQ'
                                    };
                                } else if (index == 2) {
                                    formdata = {
                                        nickName: infoRes.userInfo.nickname,
                                        gender: infoRes.userInfo.gender == 'm' ? 1 : 2,
                                        headImgUrl: infoRes.userInfo.avatar_large,
                                        openId: infoRes.userInfo.id,
                                        unionId: '',
                                        access_token: access_token,
                                        appLoginType: 'SINAWEIBO'
                                    };
                                }
                                
                                console.log(formdata, 789)
                                 //   {
                                //     "nickName": "岳",
                                //     "gender": 0,
                                //     "headImgUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJDWdPvKGc6ecSJFvRPI8Lb88PiaicJoXZVVUOPpImtyUgRQoG0ro5kL52M8WalAylEBJ7dxWR61f8g/132",
                                //     "openId": "oRrdQtzfNL3auajrNkZ4IHMoi9jg",
                                //     "unionId": "oU5Yyt3RCvihz7KRlSIEL1k4VFTQ",
                                //     "access_token": "68_I0WhyStsMOybzd6o73YZwbs5BYZ6HqcWPQhurPSif6SyDcG2yTPbgB5Ix3_SYeCcrXQrdLZzP-WRsD-2yym1ov-CBtucErWj3I8Cnwso8Dk",
                                //     "appLoginType": "WEIXIN"
                                // }
                                //  {
                                //     "nickName": ".",
                                //     "gender": 1,
                                //     "headImgUrl": "http://thirdqq.qlogo.cn/g?b=oidb&k=W4bnBjcX3SPSwbLk4Q8O5A&kti=ZEeHLwAAAAA&s=100&t=1641814290",
                                //     "openId": "84E5748C166C334E38E3C3D7B1EA72B7",
                                //     "unionId": "",
                                //     "access_token": "683A7EB66A15B92B2F4B5DFE2EA0BF40",
                                //     "appLoginType": "QQ"
                                // }










                                // 4 调用开发者后台，执行一键注册或登录
                                // uni.request({
                                //     url: 'http://192.168.43.205:8080/thirdPartLogin/app/login',
                                //     method: 'POST',
                                //     data: formdata,
                                //     header: {
                                //         'content-type': 'application/x-www-form-urlencoded'
                                //     },
                                //     success: res => {
                                //         if (res.data.code != 200) {
                                //             uni.showToast({
                                //                 title: res.data.err,
                                //                 duration: 3000,
                                //                 icon: 'none'
                                //             });
                                //             return false;
                                //         } else {
                                //             //登录成功处理
                                //             uni.showToast({
                                //                 title: res.data.message,
                                //                 duration: 3000,
                                //                 icon: 'none'
                                //             });
                                //             let ticket = res.data.ticket;
                                //             // 5 保存用户信息到全局的缓存中
                                //             uni.setStorageSync('ticket', ticket);
                                //             // 6 切换页面跳转，使用tab切换的api
                                //             uni.switchTab({
                                //                 url: '../my/my'
                                //             });
                                //             return true;
                                //         }
                                //     }
                                // });
                            }
                        });
                    },
                    fail: err => {
                        uni.showToast({
                            title: '请求出错啦！',
                            icon: 'none',
                            duration: 3000
                        });
                    }
                });
            }
        }
    },
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 240rpx;

  image {
    width: 400rpx;
    height: 120rpx;
  }
}

/* 填写 */
.input-info {
  padding: 0 6%;
  height: 240rpx;

  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    border-bottom: 2rpx solid #f6f6f6;

    input {
      width: 70%;
      height: 100%;
      font-size: 26rpx;
      color: #222222;
    }

    .more {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 30%;
      height: 100%;

      .iconfont {
        font-size: 34rpx;
      }

      .mo {
        font-size: 26rpx;
        padding-left: 20rpx;
        margin-left: 10rpx;
        border-left: 2rpx solid #eeeeee;
      }
    }
  }
}

/* 按钮 */
.btn-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88%;
    height: 80rpx;
    background: #2e996f;
    border-radius: 10rpx;
    color: #ffffff;
    font-size: 28rpx;
    // opacity: 0.4;
  }
}

/* 操作 */
.operation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  height: 80rpx;

  text {
    font-size: 28rpx;
    color: #555555;
  }
}

/* 其他 */
.other-ways {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80rpx;
  margin-top: 100rpx;

  text {
    font-size: 28rpx;
    color: #999999;
  }
}

.other-ways::after {
  content: "";
  width: 36%;
  height: 2rpx;
  background-color: #eeeeee;
}

.other-ways::before {
  content: "";
  width: 36%;
  height: 2rpx;
  background-color: #eeeeee;
}

/* 登录方式 */
.login-way {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200rpx;

  .way {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // width: 50%;
    padding: 0 50rpx;
    // background-color: gold;
    height: 100%;

    image {
      width: 100rpx;
      height: 100rpx;
    }

    text {
      font-size: 28rpx;
      color: #959595;
      margin-top: 20rpx;
    }
  }
}
</style>